<!--
 * @Description: 
 * @Author: Cxy
 * @Date: 2023-04-21 16:46:02
 * @LastEditors: Cxy
 * @LastEditTime: 2024-02-23 14:07:48
 * @FilePath: \blogAdmin\play\src\views\login\component\reg.vue
-->

<script lang="ts" setup>
import passWordRuleFun from './rules'
import type { FormInstance, FormRules } from 'element-plus'
import { XyIconRender } from '@/components/XyIcon'
import I18n from '@/hooks/I18n'

const ruleFormRef = ref<FormInstance>()
const { tt } = I18n(ruleFormRef)

const ruleForm = reactive({
  loginCode: '',
  passWord: '',
  confiPassWord: '',
  checked: false
})

const confiPassWordCheck = (_: any, value: string, callback: (error?: string | Error) => void) => {
  if (!value) return callback(new Error(tt.value('loginReg.againPasswordText')))
  if (value !== ruleForm.passWord) {
    return new Error(tt.value('loginReg.inconsPasswordText'))
  }
  callback()
}
const { passWordRule } = passWordRuleFun()
const rules = reactive<FormRules>({
  ...passWordRule,
  confiPassWord: [{ validator: confiPassWordCheck, trigger: 'blur' }]
})

onMounted(() => document.addEventListener('keydown', keydownOper))
onBeforeUnmount(() => document.removeEventListener('keydown', keydownOper))
const keydownOper = ({ key }: KeyboardEvent) => key === 'Enter' && regOper(ruleFormRef.value)

const regOper = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(valid => {
    if (valid) {
      console.log(2423)
    }
  })
}

const emit = defineEmits(['update:selectIndex'])
const loginOper = () => emit('update:selectIndex', 0)
</script>

<template>
  <el-form ref="ruleFormRef" size="large" :model="ruleForm" :rules="rules" statusIcon>
    <el-form-item prop="loginCode">
      <el-input
        v-model="ruleForm.loginCode"
        :placeholder="tt('loginReg.accountText')"
        :prefixIcon="XyIconRender('ep/user-filled')"
      />
    </el-form-item>
    <el-form-item prop="passWord">
      <el-input
        v-model="ruleForm.passWord"
        :placeholder="tt('loginReg.passwordText')"
        :prefixIcon="XyIconRender('ic:baseline-lock')"
      />
    </el-form-item>
    <el-form-item prop="confiPassWord">
      <el-input
        v-model="ruleForm.confiPassWord"
        :placeholder="tt('loginReg.confirmPasswordText')"
        :prefixIcon="XyIconRender('ep/circle-check-filled')"
      />
    </el-form-item>
    <el-form-item>
      <div class="login-password">
        <el-checkbox v-model="ruleForm.checked">{{ tt('loginReg.empowerText') }}</el-checkbox>
        <el-button style="float: right" type="primary" link>{{ tt('loginReg.privacyText') }}</el-button>
      </div>
      <el-button class="login-loginReg" type="primary" @click="regOper(ruleFormRef)">
        {{ tt('loginReg.regBtn') }}
      </el-button>
      <el-button class="login-loginReg" @click="loginOper">{{ tt('loginReg.loginBtn') }}</el-button>
    </el-form-item>
  </el-form>
</template>

<style lang="scss" scoped>
.login-password {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: pxToRem(-8);
}

.login-loginReg {
  width: calc(50% - pxToRem(6));
}
</style>
